<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8">
<title>脚本任务</title>
<@fm.header />
<style type="text/css">
body {
	font: 12px/20px "微软雅黑", "宋体", Arial, sans-serif, Verdana, Tahoma;
	padding: 0;
	margin: 0;
}
.layout-split-proxy-h{
	position:absolute;
	width:2px;
	background:#888;
	font-size:1px;
	cursor:e-resize;
	display:none;
	z-index:5;
}
.layout-split-north{
	border-bottom:5px solid #efefef;
}
.layout-split-south{
	border-top:5px solid #efefef;
}
.layout-split-east{
	border-left:0px solid #efefef;
}
.layout-split-west{
	border-right:0px solid #efefef;
}
a:link {
 text-decoration: none;
}
a:visited {
 text-decoration: none;
}
a:hover {
 text-decoration: underline;
}
a:active {
 text-decoration: none;
}
.cs-north {
	height:40px;
	overflow:hidden;
}
.cs-north-bg {
	width: 100%;
	height: 100%;
	background: url(/resources/js/easyui/themes/bootstrap/images/header_bg.png) repeat-x;
}
.cs-north-logo {
	height: 30px;
	margin: 10px 0px 20px 5px;
	display: inline-block;
	color:#0E2D5F;
	font-size:20px;
	font-weight:bold;
	text-decoration:none;
}
.cs-north-info {
	position: absolute;
	color: #777;
	top: 10px;
	right: 30px;
	display: inline-block;
}
</style>
<script>
$(function(){
    var time = getNowFormatDate();
    $("#startTime").datebox('setValue', time);
	$("#endTime").datebox('setValue', time);
	$('#tt').datagrid({
		url:'/scriptCosttimeRecord/pageList',
		queryParams:{
			start : time,
			end : time
		}
	});
});

function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
 }
 
  
function doSearch(){  
	var startTime = $('#startTime').datebox('getValue');
	var endTime = $('#endTime').datebox('getValue');
	if (startTime != "" && endTime != "") {
		var diff = GetDateDiff(startTime, endTime, "second");
		if (diff > 0) {
			alert("开始时间不能小于结束时间！");
			return false;
		}
	}
  
    $('#tt').datagrid('load', {    
        mark: $('#mark').val(),
        start: startTime,
        end: endTime
    });
}

function GetDateDiff(startTime, endTime, diffType) {
    //将计算间隔类性字符转换为小写
    diffType = diffType.toLowerCase();
    var sTime = new Date(startTime);      //开始时间
    var eTime = new Date(endTime);  //结束时间
    
    var divNum = 1;
    switch (diffType) {
        case "second":
            divNum = 1000;
            break;
        case "minute":
            divNum = 1000 * 60;
            break;
        case "hour":
            divNum = 1000 * 3600;
            break;
        case "day":
            divNum = 1000 * 3600 * 24;
            break;
        default:
            break;
    }
    return parseInt((sTime.getTime() - eTime.getTime()) / parseInt(divNum));
}

function formatterNewTime(value,row,index){
	if (value == null) {
		return "0秒(0分钟)";
	}
	var minute = value/60/1000;
    var miao = 	Math.round(value/1000);
	return  miao + "秒(" +  minute.toFixed(2) + "分钟)";
}

function formattertaskType(value,row,index){
	if (value == "1") {
		return "新增";
	}
	if (value == "2") {
		return "留存";
	}
	return "未知";
}
</script>
</head>
<body class="cmp-list-body">
	<div id="tb" style="padding:3px">
        <span>mark:</span>  
	 	<input id="mark" style="line-height:20px;border:1px solid #ccc">
        <span>开始时间:</span> 
        <input type="text" class="easyui-datebox" id="startTime"> </input>
        <span>结束时间:</span> 
        <input type="text" class="easyui-datebox" id="endTime"> </input>
    	<a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="doSearch();">查询</a> 
	</div>
	<table id="tt" title="脚本任务时长" iconCls="icon-save"  toolbar="#tb" rownumbers="true" idField="id"
		singleSelect="true" pagination="true" fitColumns="true" pageSize="50" pageList="[50,100,150,200,400,600,800,1000]"> 
	    <thead>
	        <tr>
	            <th align="center" width="10%" field="mark">Mark</th>
	            <th align="center" width="30%" field="apkName">apkName</th>
	            <th align="center" width="15%" field="countAvg"  formatter="formatterNewTime">新增任务平均</th>
	            <th align="center" width="15%" field="userAvg" formatter="formatterNewTime">新增用户平均</th>
	            <th align="center" width="15%" field="retentCountAvg"  formatter="formatterNewTime">留存任务平均</th>
	            <th align="center" width="15%" field="retentUserAvg" formatter="formatterNewTime">留存用户平均</th>
	            <th align="center" width="20%" field="day">时间</th>
	        </tr>
	    </thead>   
	</table>
</body>

</html>